<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
	<head>
    	<title>管理员</title>
    	<jsp:include page="/commons/head.jsp"></jsp:include>
	</head>
  
  	<body>
    	
    	<span class="layui-breadcrumb">
		  	<a href="/" target="_top">CRM</a>
		  	<a href="javascript:">管理系统</a>
		  	<a><cite>管理员</cite></a>
		</span>
		
		<blockquote class="layui-elem-quote quote-new">
			<form class="layui-form" action="">
    			<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">账号</label>
				    <div class="layui-input-inline">
				      	<input type="text" name="userName" placeholder="请输入账号" class="layui-input">
				    </div>
				</div>
				<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">状态</label>
				    <div class="layui-input-inline">
				      	<select name="status">
					        <option value=""></option>
					        <option value="1">正常</option>
					        <option value="0">禁用</option>
				      	</select>
				    </div>
				</div>
				<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">角色</label>
				    <div class="layui-input-inline">
				      	<select name="roleId" id="sel-seach-roleId">
					        <option value=""></option>
				      	</select>
				    </div>
				</div>
				<div class="layui-form-item layui-inline">
					<button class="layui-btn" lay-submit lay-filter="searchForm">查询</button>
				</div>
    		</form>
		</blockquote>
		
		<div>
			<button class="layui-btn layui-btn-normal openEdit">添加</button>
		</div>
		
		<form class="layui-form" action="">
			<table class="layui-table" id="tableList">
			  	<colgroup>
			    	<col width="30">
			    	<col width="160">
			    	<col width="160">
			    	<col width="200">
			    	<col width="100">
			    	<col width="100">
			    	<col width="200">
			    	<col>
			  	</colgroup>
		  		<thead>
		    		<tr>
		    			<th><input type="checkbox" name="all" lay-skin="primary" lay-filter="chkUserIdAll"/></th>
				      	<th>账号</th>
				      	<th>姓名</th>
				      	<th>角色</th>
				      	<th>状态</th>
				      	<th>在线状态</th>
				      	<th>创建时间</th>
				      	<th>操作</th>
		    		</tr> 
		  		</thead>
		  		<tbody></tbody>
			</table>
		</form>
    	
    	<div id="div-page"></div>
    	
    	<div id="div-edit" style="display:none;margin:15px 0;">
    		<form class="layui-form" id="formEdit" action="">
	    		<input type="hidden" name="userId">
	    		<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">账号</label>
				    <div class="layui-input-inline">
				      	<input type="text" name="userName" lay-verify="required" placeholder="账号" class="layui-input">
				    </div>
				</div>
				<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">姓名</label>
				    <div class="layui-input-inline">
				      	<input type="text" name="realName" lay-verify="required" placeholder="姓名" class="layui-input">
				    </div>
				</div>
				<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">密码</label>
				    <div class="layui-input-inline">
				      	<input type="password" name="password" lay-verify="required" placeholder="密码" class="layui-input">
				    </div>
				</div>
				<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">角色</label>
				    <div class="layui-input-inline">
				      	<select name="roleId">
					        <option value=""></option>
				      	</select>
				    </div>
				</div>
				<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">状态</label>
				    <div class="layui-input-inline">
				      	<select name="status">
					        <option value=""></option>
					        <option value="1">正常</option>
					        <option value="0">禁用</option>
				      	</select>
				    </div>
				</div>
				<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">手机</label>
				    <div class="layui-input-inline">
				      	<input type="text" name="mobile" lay-verify="required" placeholder="手机" class="layui-input">
				    </div>
				</div>
				<div class="layui-form-item layui-inline">
				    <label class="layui-form-label">邮箱</label>
				    <div class="layui-input-inline">
				      	<input type="text" name="email" lay-verify="required" placeholder="邮箱" class="layui-input">
				    </div>
				</div>
				<div style="text-align:right;padding-right:26px;">
					<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveForm">保存</button>
					<button class="layui-btn layui-btn-primary" id="btn-edit-cancel">取消</button>
				</div>
			</form>
    	</div>
    	
  	</body>
</html>
<script type="text/javascript">
var jsonParam = {/*pageSize:1*/};

layui.use(['element', 'form', 'laypage', 'layer'], function(){
	var element = layui.element(); //导航的hover效果、二级菜单等功能，需要依赖element模块
	var form = layui.form();
	var laypage = layui.laypage;
	var layer = layui.layer;
	
	loadData();
	sysUsersList();
	
	form.on('checkbox(chkUserIdAll)', function(data){
		if(data.elem.checked){
			$('#tableList [name=userId]').prop('checked', true);
		}else{
			$('#tableList [name=userId]').prop('checked', false);
		}
		form.render();
	});
	
	form.on('checkbox(chkUserId)', function(data){
		if(data.elem.checked){
			if($('#tableList [name=userId]').length == $('#tableList [name=userId]:checked').length){
				$('#tableList [name=all]').prop('checked', true);
			}else{
				$('#tableList [name=all]').prop('checked', false);
			}
		}else{
			$('#tableList [name=all]').prop('checked', false);
		}
		form.render();
	});
	
	form.on('submit(searchForm)', function(data){
		jsonParam = data.field;
		jsonParam.pageNo = 1;
		sysUsersList();
		return false;
	});
	
	form.on('submit(saveForm)', function(data){
		var field = data.field;
		field.operating = 'save';
		if(field.userName.length<6){
			layer.msg('账号错误');
		}else if(field.password.length<6){
			layer.msg('密码错误');
		}else{
			var retJson = ajaxFun('/sys/sysUsers', field);
	    	if(retJson.code==1){
	    		sysUsersList();
	    		$('#btn-edit-cancel').click();
	    		layer.msg('保存成功');
	    	}else{
	    		if(retJson.msg!=null){
	    			layer.msg(retJson.msg);
	    		}
	    	}
	    }
    	return false;
	});
	
	
	
	
	function bindOperatingClick(){
		$('.openEdit').on('click', function(){
			var userId = $(this).attr('userId');
			var retJson = {data : {}};
			if(userId!=null && userId!=''){
				retJson = ajaxFun('/sys/sysUsers', {operating : 'get', userId : userId});
				if(retJson.code != 1){
					layer.msg(retJson.msg);
					return false;
				}
			}
			
			var data = retJson.data;
			$('#formEdit [name=userId]').val(objectToVal(data.userId));
			$('#formEdit [name=userName]').val(objectToVal(data.userName));
			if(userId==null || userId==''){
				$('#formEdit [name=userName]').attr('disabled', false);
			}else{
				$('#formEdit [name=userName]').attr('disabled', true);
			}
			$('#formEdit [name=realName]').val(objectToVal(data.realName));
			$('#formEdit [name=password]').val(objectToVal(decryptionMD0ofStr(objectToVal(data.password))));
			$('#formEdit [name=roleId]').val(objectToVal(data.roleId));
			$('#formEdit [name=status]').val(objectToVal(data.status));
			$('#formEdit [name=mobile]').val(objectToVal(data.mobile));
			$('#formEdit [name=email]').val(objectToVal(data.email));
			form.render('select');
			
			var index = 
				layer.open({
					type: 1,
					title : (userId==null||userId==0 ? '新增' : '修改') + '管理员信息',
					content : $('#div-edit'),
					area : '640px'
				});
			
			$('#btn-edit-cancel').click(function(){
				layer.close(index);
				return false;
			});
			return false;
		});
		
		$('.delete').on('click', function(){
			var userId = $(this).attr('userId');
			var userName = $(this).attr('userName');
			var index = layer.confirm('确认删除管理员账号：'+userName, {
						  	btn: ['确定','取消']
						}, function(){
							retJson = ajaxFun('/sys/sysUsers', {operating : 'delete', userId : userId});
							if(retJson.code==1){
								sysUsersList();
								layer.close(index);
								layer.msg('删除成功.');
							}else{
								layer.msg(retJson.msg);
							}
						}, function(){
						  	//点击取消按钮执行的方法
						});
		});
	}
	
	function loadData(){
		var retJson = ajaxFun('/sys/sysUsers', {operating : 'loadData'});
		for(var i=0,len=retJson.length; i<len; i++){
			$('#sel-seach-roleId').append('<option value="'+retJson[i].roleId+'">'+retJson[i].roleName+'</option>');
			$('#formEdit [name=roleId]').append('<option value="'+retJson[i].roleId+'">'+retJson[i].roleName+'</option>');
		}
	}
	
	function sysUsersList(){
		$('#tableList tbody').html('');
		
		var retJson = ajaxFun('/sys/sysUsers', jsonParam);
		var list = strToJson(retJson.data);
		var other = retJson.other;
		var html = '';
		for(var i=0,len=list.length; i<len; i++){
			html += '<tr>';
			html += 	'<td><input type="checkbox" name="userId" lay-skin="primary" lay-filter="chkUserId" value="'+list[i].userId+'"/></td>';
			html += 	'<td>'+list[i].userName+'</td>';
			html += 	'<td>'+list[i].realName+'</td>';
			html += 	'<td>'+list[i].roleName+'</td>';
			html += 	'<td>'+(list[i].status==1?'<span class="status1">正常</span>':'<span class="status0">禁用</span>')+'</td>';
			html += 	'<td>'+(other['USERID_'+list[i].userId]?'<span class="status1">在线</span>':'<span style="color:#ccc;">离线</span>')+'</td>';
			html += 	'<td>'+list[i].createTime+'</td>';
			html += 	'<td class="operating">';
			html += 		'<a href="javascript:" class="openEdit first" userId="'+list[i].userId+'">编辑</a>';
			html += 		'<a href="javascript:" class="delete" userId="'+list[i].userId+'" userName="'+list[i].userName+'">删除</a>';
			html += 	'</td>';
			html += '</tr>';
		}
		$('#tableList tbody').append(html);
		form.render();
		bindOperatingClick();
		
		laypage({
		    cont : 'div-page',
		    pages : retJson.totalPage,
		    curr : retJson.pageNo,
		    skip: true,
		    jump : function(obj, first){
		    	if(!first){
		    		jsonParam.pageNo = obj.curr;
		    		sysUsersList();
		    	}
		    }
		});
	}
	
	function objectToVal(o){
		if(o==null || o=='undefined'){
			return '';
		}
		return o;
	}

});
</script>
